<template>
    <div class="app-cart">
        <AppHeader class="app-common__header" title="购物车" back></AppHeader>
        <van-empty v-if="!isLoggined" description="请先登录后再操作">
            <router-link 
            v-slot="{navigate}"
            custom
            :to="{name:'login'}"
            >
            <van-button @click="navigate" round type="danger" class="bottom-button">去登录</van-button>
            <div class="router-link-active">
              <div class="router-link-cart">
                  <van-icon name="shopping-cart-o" size="30"/>
                  <span>购物车还是空的</span>
                  <van-tag plain type="primary" text-color="#000" color="#000">
                  <RouterLink v-slot="{ navigate }" custom to="/main"><span @click="navigate">去逛逛</span>
                  </RouterLink>
                  </van-tag>
              </div>
            </div>
            </router-link>
        </van-empty>
        <div v-else>
          <van-swipe-cell
            v-for="item in carts"
            :key="item.cartid"
          >
            <div class="cart-item">
              <van-checkbox :model-value="item.flag" @update:model-value="handleChangeFlag(item.cartid, !item.flag)"></van-checkbox>
              <van-card
                :num="item.num"
                :price="item.originprice"
                :title="item.proname"
                :thumb="item.img1"
              >
                <template #footer>
                  <van-button size="mini" :disabled="item.num === 1" @click="handleUpdateNum(item.cartid, item.num - 1)">-</van-button>
                  <van-button size="mini" @click="handleUpdateNum(item.cartid, item.num + 1)">+</van-button>
                </template>
              </van-card>
            </div>
            <template #right>
              <van-button square text="删除" type="danger" @click="handleDelete(item.cartid)" class="delete-button" />
            </template>
          </van-swipe-cell>
          <van-submit-bar class="bottom-order" :price="allPrice * 100" button-text="提交订单">
            <van-checkbox :model-value="checkedAll" @update:model-value="handleCheckedAll">全选</van-checkbox>
          </van-submit-bar>
    </div>
    </div>
</template>
<script setup lang="ts">
import {ref,computed,watch,onMounted} from 'vue'
import type {ICartItem} from '@/@types/cart'
import useAuthorityStore from '@/stores/authority'
import { storeToRefs } from 'pinia'
import {postCartListApi,postAddCartItemApi,postUpdateCartNumApi,postmoveCartItemApi,postUpdateCartItemFlagApi,postUpdateAllCartItemFlagApi} from '@/api/cart'
const authStore = useAuthorityStore()
const { authorityInfo,isLoggined} = storeToRefs(authStore)
const carts=ref<ICartItem[]>([])
const checkedAll=ref<boolean>(false)
const allPrice = computed<number>(() => carts.value.reduce((prev: number, curr:ICartItem) => (curr.flag ? prev + (curr.num * curr.originprice) : prev), 0))

const getCartList = async () => {
  try {
    carts.value =await postCartListApi(authorityInfo.value.userid)
  } catch (error) {}
}

watch(carts, () => {
  checkedAll.value = carts.value.every((item) => item.flag)
}, { immediate: true })

const handleCheckedAll = async (e: Event) => {
  try {
    await postUpdateAllCartItemFlagApi({ userid: authorityInfo.value.userid, type: !checkedAll.value })
    getCartList()
  } catch (error) {}
}

const handleUpdateNum = async (cartid: string, num: number) => {
  try {
    await postUpdateCartNumApi({ cartid, num })
    getCartList()
  } catch (error) {}
}

const handleDelete = async (cartid: string) => {
  try {
    await postmoveCartItemApi(cartid)
    getCartList()
  } catch (error) {}
}

const handleChangeFlag = async (cartid: string, flag: boolean) => {
  try {
    await postUpdateCartItemFlagApi({ cartid, flag })
    getCartList()
  } catch (error) {}
}

onMounted(() => {
  if (isLoggined) {
    getCartList()
  }
})

</script>
<style lang="scss">
.app-cart{
    .bottom-order{
        margin-bottom: 50px;
    }
    .router-link-active {
      position: absolute;
      left:0%;
      top:55%;
      width: 375px;
      height:64px;
      background-color: #EBEBEB;
   }
   .delete-button {
    height: 100%;
  }
    .router-link-cart {
    height: 50px;
    width:350px;
    margin:7px 10px; 
    .van-icon {
    margin-left:70px;
   }
    span{
    width: 50px;
    height:50px;
    color:#3c3c3c;
    font-size: 16px;
    margin-left:10px;
    line-height: 50px;
    }
    .van-tag {
    width: 85px; 
    height:30px;
    margin-left:20px;
    }
    } 
 
  .shopping-cart {
  color: #fff;
  font-size: 20px;
  }
}
</style>